import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:shimmer/shimmer.dart';

import '../provider/comment_provider.dart';
import 'comment_input_sheet.dart';
import 'comment_item.dart';

class CommentSection extends StatelessWidget {
  const CommentSection({super.key});

  // shimmer 骨架屏组件
  Widget _buildShimmerItem() {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Shimmer.fromColors(
            baseColor: Colors.grey.shade300,
            highlightColor: Colors.grey.shade100,
            child: const CircleAvatar(radius: 20),
          ),
          const SizedBox(width: 12),
          Expanded(
            child: Shimmer.fromColors(
              baseColor: Colors.grey.shade300,
              highlightColor: Colors.grey.shade100,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    height: 12,
                    width: double.infinity,
                    color: Colors.white,
                    margin: const EdgeInsets.only(bottom: 8),
                  ),
                  Container(height: 12, width: 100, color: Colors.white),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Consumer<CommentProvider>(
      builder: (_, provider, __) {
        if (provider.isLoading) {
          // 加载中用 shimmer 骨架屏代替 CircularProgressIndicator
          return Column(children: List.generate(3, (_) => _buildShimmerItem()));
        }

        return Column(
          children: [
            const Align(
              alignment: Alignment.centerLeft,
              child: Padding(
                padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
                child: Text(
                  "评论",
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
              ),
            ),
            if (provider.comments.isEmpty)
              const Padding(padding: EdgeInsets.all(16), child: Text("暂无评论"))
            else
              ListView.separated(
                shrinkWrap: true,
                physics: const NeverScrollableScrollPhysics(),
                itemCount: provider.comments.length,
                itemBuilder: (_, index) {
                  final c = provider.comments[index];
                  return CommentItem(
                    comment: c,
                    onReply: (comment) async {
                      final result = await showModalBottomSheet<bool>(
                        context: context,
                        isScrollControlled: true,
                        builder: (_) => CommentInputSheet(
                          postId: provider.postId,
                          parentId: comment.id,
                        ),
                      );

                      if (result == true && context.mounted) {
                        // ScaffoldMessenger.of(context).showSnackBar(
                        //   const SnackBar(
                        //     content: Text("评论成功"),
                        //   ),
                        // );
                        Future.microtask(() {
                          provider.loadComments();
                        });
                      }
                    },
                  );
                },
                separatorBuilder: (_, __) => Container(
                  margin: const EdgeInsets.only(left: 60),
                  child: const Divider(
                    height: 1,
                    thickness: 0.5,
                    color: Color.fromARGB(77, 158, 158, 158),
                  ),
                ),
              ),
            const SizedBox(height: 8),
          ],
        );
      },
    );
  }
}
